<template>
	<div class="Body">
		<el-empty v-if="!houseDate.length" description="暂无数据" />
		<el-descriptions class="margin-top" :column="3" border v-else v-for="(item,index) in houseDate"
			:key="item.reserveId">
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-user"></i>
					预定人姓名
				</template>
				{{item.reserveName}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-mobile-phone"></i>
					电话号码
				</template>
				{{item.phone}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-date"></i>
					入住时间
				</template>
				{{item.arrivalTime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-date"></i>
					离店时间
				</template>
				{{item.checkoutTime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-tickets"></i>
					入住天数
				</template>
				<el-tag size="small">{{item.playDays}}天</el-tag>
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-time"></i>
					预定时间
				</template>
				{{item.orderTime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-time"></i>
					支付时间
				</template>
				{{item.payTime}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-s-finance"></i>
					支付状态
				</template>
				<img src="@/assets/weizhifu.png" v-if="item.payStatus === 0" alt="" />
				<img v-if="item.payStatus === 1" src="@/assets/yizhifu.png" alt="" />
				<img v-if="item.payStatus === 2" src="@/assets/images/tuikuan.png" alt="" />
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-school"></i>
					店家名称
				</template>
				{{item.houseName}}
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-school"></i>
					状态
				</template>
				<el-tag size="small" type="warning" v-if="item.reserveStatus === 0">等待商家接受预定</el-tag>
				<el-tag size="small" type="success" v-if="item.reserveStatus === 1">商家已接受预定</el-tag>
				<el-tag size="small" type="warning" v-if="item.reserveStatus === 2">申请取消预定</el-tag>
				<el-tag size="small" type="danger" v-if="item.reserveStatus === 3">已取消预定</el-tag>
				<el-tag size="small" type="danger" v-if="item.reserveStatus === 4">商家未接受预定</el-tag>
				<el-tag size="small" type="success" v-if="item.reserveStatus === 5">交易完成</el-tag>
			</el-descriptions-item>
			<el-descriptions-item>
				<template slot="label">
					<i class="el-icon-school"></i>
					店家名称
				</template>
				{{item.houseName}}
			</el-descriptions-item>
			<template slot="extra">
				<div class="btn">
					<el-button v-if="item.payStatus === 0" type="primary" size="small"
						@click="goToPay(item)">去支付</el-button>
					<el-button v-if="item.reserveStatus === 5 && item.evaluateStatus === 0" type="primary" size="small"
						@click="ToEvaluateDialog(item)">去评价</el-button>
					<el-button v-if="item.reserveStatus === 5 && item.evaluateStatus === 1" type="primary" size="small"
						@click="poenEditEvaluatedialog(item)">修改评价</el-button>
					<el-button v-if="item.reserveStatus === 1" type="primary" size="small"
						@click="UserApplyForCancelReserve(item)">取消预定</el-button>
					<el-button type="danger" icon="el-icon-delete" size="small" @click="handleDelete(item)"></el-button>
				</div>
			</template>
		</el-descriptions>
		<el-dialog title="支付宝扫码支付" :visible.sync="dialogVisible" width="252px" center>
			<!--二维码生成-->
			<vueQr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false" :logoSrc="logoSrc">
			</vueQr>
			<span id="dialogSpan" v-show="paySucc == true"></span>
			<span id="dialogSpan2" v-show="paySucc == true">
				<i class="el-icon-success"
					style="background-color: #FFFFFF; color:#67C23A; font-size: 60px;border-radius: 30px;" />
				<br />
				支付成功
			</span>
		</el-dialog>

		<el-dialog title="评价" :visible.sync="evaluatedialogVisible" width="30%" :before-close="handleClose">
			<div style="display: flex;margin-bottom: 20px;">
				<span style="font-size: 16px; margin-right: 45px;">评分</span>
				<el-rate v-model="value" :colors="colors" show-score text-color="#ff0000" @change="rateOrder">
				</el-rate>
			</div>
			<div style="display: flex;">
				<span style="font-size: 16px; margin-right: 15px;">评价内容
				</span>
				<el-input style="width: 440px;" type="textarea" maxlength="100" show-word-limit placeholder="请输入内容"
					v-model="input" clearable>
				</el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="AddToEvaluate">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="编辑评价" :visible.sync="evaluateEditdialogVisible" width="30%" :before-close="handleEditClose">
			<div style="display: flex;margin-bottom: 20px;">
				<span style="font-size: 16px; margin-right: 45px;">评分</span>
				<el-rate v-model="value" :colors="colors" show-score text-color="#ff0000" @change="rateOrder">
				</el-rate>
			</div>
			<div style="display: flex;">
				<span style="font-size: 16px; margin-right: 15px;">评价内容
				</span>
				<el-input style="width: 440px;" type="textarea" maxlength="100" show-word-limit placeholder="请输入内容"
					v-model="input" clearable>
				</el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleEditClose">取 消</el-button>
				<el-button type="primary" @click="EditEvaluate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import reserveApi from "@/api/reserve.js"
	import service from "@/utils/serviceApi.js"
	import vueQr from 'vue-qr'
	export default {
		components: {
			vueQr
		},
		data() {
			return {
				type: String,
				dialogVisible: false,
				evaluatedialogVisible: false,
				evaluateEditdialogVisible: false,
				input: '',
				value: 0,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				qr: "",
				paySucc: false,
				logoSrc: require('@/assets/zhifubao.png'),
				houseDate: [],
				userInfo: {},
				copyhouseDate: {},
				copyEvaluate: {},
			};
		},
		methods: {
			async queryMyReserve() {
				const res = await reserveApi.queryMyReserve("/znFarmhouseReserve/queryMyReserve", {
					userName: this.userInfo.userName
				});
				if (res.flag == true) {
					this.houseDate = res.data;
				}
			},
			async deleteMyReserve(item) {
				const res = await reserveApi.deleteMyReserve("/znFarmhouseReserve/deleteMyReserve/" + item.reserveId);
			},
			goToPay(item) {
				let _this = this;
				// 这里填写后台支付的地址
				service({
					method: 'POST',
					url: "/Alipay/reservePay?reserveNumber=" + item.reserveNumber,
				}).then(res => {
					this.qr = res.data;
					if ("WebSocket" in window) {
						// 打开一个 web socket
						// 通道地址按照项目进行配置
						var ws = new WebSocket("ws://localhost:9010/bindingRecord");
						ws.onopen = function() {
							// Web Socket 已连接上，使用 send() 方法发送数据
							// ws.send("data");
							// alert("数据发送中...");
						};
						ws.onmessage = function(evt) {
							var received_msg = evt.data;
							// 接收后台推送的数据
							// alert("数据已接收..." + evt.data);
							if (Boolean(evt.data)) {
								_this.paySucc = true;
								setTimeout(() => {
									_this.dialogVisible = false;
									_this.queryMyReserve();
								}, 3 * 1000);
							} else {
								_this.paySucc = false;
								setTimeout(() => {
									_this.dialogVisible = false;
									_this.paySucc = false;
								}, 3 * 1000);
							}
							ws.close();
						};
						ws.onclose = function() {

						};
					} else {
						// 浏览器不支持 WebSocket
						alert("您的浏览器不支持 WebSocket!");
					}
				});
				this.dialogVisible = true;
			},
			async UserApplyForCancelReserve(item) { //用户取消预定申请
				const res = await reserveApi.cancelReserva("/znFarmhouseReserve/UserApplyForCancelReserve?reserveId=" +
					item.reserveId);
				if (res.code == 200) {
					this.queryMyReserve();
					this.$notify({
						title: '成功',
						message: "等待商家处理申请",
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						type: 'error'
					});
				}
			},
			handleDelete(item) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteMyReserve(item),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					this.queryMyReserve();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			ToEvaluateDialog(item) { //打开评价对话框
				this.evaluatedialogVisible = true;
				this.copyhouseDate = item;
			},
			async AddToEvaluate() {
				let evaluate = {
					houseId: this.copyhouseDate.houseId,
					reserveId: this.copyhouseDate.reserveId,
					content: this.input,
					score: this.value
				}
				const res = await reserveApi.addEvaluate("/ZnHouseEvaluate/addEvaluate", evaluate);
				if (res.code == 200) {
					this.evaluatedialogVisible = false;
					this.input = '';
					this.value = 0;
					this.queryMyReserve();
					this.$notify({
						title: '成功',
						message: '评价成功',
						type: "success",
						offset: 100
					});
				} else {
					this.$notify({
						title: '失败',
						message: '请检查输入的数据',
						type: "error",
						offset: 100
					});
				}
			},
			async poenEditEvaluatedialog(item) { //打开修改评价对话框
				this.evaluateEditdialogVisible = true;
				let reserve = {
					reserveId: item.reserveId
				}
				const res = await reserveApi.getEvaluate("/ZnHouseEvaluate/getEvaluate", reserve);
				if (res.code == 200) {
					this.copyEvaluate = res.data;
					this.input = res.data.content;
					this.value = res.data.score;
				}
			},
			async EditEvaluate() {
				let evaluate = {
					id: this.copyEvaluate.id,
					content: this.input,
					score: this.value
				};
				const res = await reserveApi.EditEvaluate("/ZnHouseEvaluate/EditEvaluate", evaluate);
				if (res.code == 200) {
					this.evaluateEditdialogVisible = false;
					this.input = '';
					this.value = 0;
					this.queryMyReserve();
					this.$notify({
						title: '成功',
						message: '评价成功',
						type: "success",
						offset: 100
					});
				} else {
					this.$notify({
						title: '失败',
						message: '请检查输入的数据',
						type: "error",
						offset: 100
					});
				}
			},
			handleClose() {
				this.evaluatedialogVisible = false;
				this.input = '';
				this.value = 0;
			},
			handleEditClose() {
				this.evaluateEditdialogVisible = false;
				this.input = '';
				this.value = 0;
			},
			rateOrder(value) {
				console.log("评分为：", value)
				this.value = value
			},
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.queryMyReserve();
		}
	}
</script>

<style lang="scss" scoped>
	.Body {
		margin: 10px 0 0 10px;
	}

	.el-descriptions {
		margin-bottom: 20px;
	}

	#dialogSpan {
		display: inline-block;
		width: 200px;
		height: 200px;
		position: absolute;
		top: 80px;
		right: 27px;
		opacity: 0.9;
		background-color: #FFFFFF;
	}

	#dialogSpan2 {
		display: inline-block;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 124px;
		right: 80px;
		font-size: 20px;
		text-align: center;
	}

	.margin-top {
		background-color: #FFFFFF;
		border-radius: 1%;

		.btn {
			position: relative;
			right: 20%;
			transform: translateY(25%);
		}
	}
</style>